<template>
  <view class="bd">
    <view class="inp-group">
      <view class="inp-item uni-item-line flex flex-al-c">
        <view class="inp-title" style="width: 200upx">真实姓名</view>
        <input
          class="inp"
          type="text"
          placeholder="请输入姓名"
          v-model="user.userName"
          maxlength="13"
        />
      </view>
      <view class="inp-item uni-item-line flex flex-al-c">
        <view class="inp-title" style="width: 200upx">性别</view>
        <view
          class="gravid"
          style="margin-right: 100upx"
          :class="{ active: user.gender == '1' }"
          >◉ 男</view
        >
        <view class="gravid" :class="{ active: user.gender == '0' }">◉ 女</view>
      </view>

      <view class="inp-item uni-item-line flex flex-al-c">
        <view class="inp-title" style="width: 200upx">身份证号</view>
        <input
          class="inp"
          placeholder="请输入您的身份证号"
          v-model="user.idCard"
          disabled="true"
        />
      </view>
      <view class="inp-item uni-item-line flex flex-al-c t1">
        <view class="inp-title" style="width: 200upx">身高</view>
        <input
          class="inp"
          type="number"
          placeholder="请输入身高"
          v-model="user.height"
          @input="checkNum($event, 1)"
        />
        cm
      </view>
      <view class="inp-item uni-item-line flex flex-al-c t1">
        <view class="inp-title" style="width: 200upx">体重</view>
        <input
          class="inp"
          type="number"
          placeholder="请输入体重"
          v-model="user.weight"
          @input="checkNum($event, 2)"
        />
        kg
      </view>
      <view class="inp-item uni-item-line flex flex-al-c">
        <view class="inp-title" style="width: 200upx">手机号</view>
        <input
          class="inp"
          type="number"
          placeholder="请输入手机号"
          v-model="user.phone"
          maxlength="11"
        />
      </view>
      <view class="inp-item uni-item-line flex flex-al-c">
        <view class="inp-title" style="width: 200upx">所属地区</view>
        <input
          class="inp"
          type="text"
          placeholder="请选择所属社区"
          v-model="user.deptId"
          style="display: none"
        />
        <input
          type="text"
          v-model="aName"
          disabled
          @tap="goSelectDep"
          class="shows t1"
        />
      </view>
      <view class="inp-item uni-item-line flex flex-al-c">
        <view class="inp-title" style="width: 200upx">所属社区</view>
        <input
          class="inp"
          type="text"
          placeholder="请选择所属社区"
          v-model="user.deptId"
          style="display: none"
        />
        <input
          type="text"
          v-model="dName"
          disabled
          @tap="goSelectDep"
          class="shows t1"
        />
      </view>
      <view class="inp-item uni-item-line flex flex-al-c">
        <view class="inp-title" style="width: 200upx">医保类型</view>
        <input
          class="inp"
          type="text"
          @tap="show = true"
          v-model="sqname"
          disabled
        />
        <u-picker
          v-model="show"
          mode="selector"
          :range="yblist"
          range-key="name"
          @confirm="getSelectVal"
        >
        </u-picker>
        <!-- <view class="gravid" style="margin-right: 50upx;" :class="{active: user.medicalInsuranceType=='1'}"
					@tap="user.medicalInsuranceType='1'">◉ 城市医保</view>
				<view class="gravid" :class="{active: user.medicalInsuranceType=='2'}"
					@tap="user.medicalInsuranceType='2'">◉ 农村医保</view> -->
      </view>
      <view
        class="inp-item uni-item-line flex flex-al-c"
        v-if="
          user.userType == '2' || (user.userType == '3' && user.gender == '0')
        "
      >
        <view class="inp-title" style="width: 200upx">请选择</view>
        <view
          class="gravid"
          style="font-size: 13px; margin-right: 4px"
          :class="{ active: user.gravid == '0' }"
          @tap="user.gravid = '0'"
          >◉ 正常</view
        >
        <view
          class="gravid"
          style="font-size: 13px; margin-right: 4px"
          :class="{ active: user.gravid == '1' }"
          @tap="user.gravid = '1'"
          >◉ 怀孕</view
        >
        <view
          class="gravid"
          style="font-size: 13px; margin-right: 4px"
          :class="{ active: user.gravid == '2' }"
          @tap="user.gravid = '2'"
          >◉ 备孕</view
        >
        <view
          class="gravid"
          style="font-size: 13px; margin-right: 4px"
          :class="{ active: user.gravid == '3' }"
          @tap="user.gravid = '3'"
          >◉ 宝妈</view
        >
      </view>
      <view
        class="inp-item uni-item-line flex flex-al-c"
        v-if="user.gravid == '1'"
      >
        <view class="inp-title" style="width: 200upx">末期月经时间</view
        >{{ userType }}
        <input
          class="inp"
          v-model="user.lastMenstruation"
          disabled="true"
          @tap="showTime = true"
          placeholder="请选择末期月经时间"
        />
      </view>
      <view
        class="inp-item uni-item-line flex flex-al-c"
        v-if="user.age > 35 && user.userType != '4'"
      >
        <view class="inp-title" style="width: 200upx">是否慢性病</view>
        <view
          class="gravid"
          style="margin-right: 50upx"
          :class="{ active: user.chronic == '1' }"
          @tap="user.chronic = '1'"
          >◉ 是</view
        >
        <view
          class="gravid"
          :class="{ active: user.chronic == '0' }"
          @tap="user.chronic = '0'"
          >◉ 否</view
        >
      </view>
      <view class="inp-item uni-item-line flex flex-al-c">
        <view class="inp-title" style="width: 200upx">银行卡号</view>
        <input
          class="inp"
          type="number"
          v-model="user.bankCode"
          placeholder="请输入银行卡号"
          maxlength="19"
        />
      </view>
      <view class="inp-item uni-item-line flex flex-al-c">
        <view class="inp-title" style="width: 200upx">微信号</view>
        <input
          class="inp"
          type="text"
          v-model="user.wechatCode"
          placeholder="请输入微信号"
        />
      </view>
      <view class="inp-item uni-item-line flex flex-al-c">
        <view class="inp-title" style="width: 200upx">支付宝账号</view>
        <input
          class="inp"
          type="text"
          v-model="user.alipayCode"
          placeholder="请输入支付宝账号"
        />
      </view>
      <view style="margin: 100upx 0 50upx">
        <button type="default" class="sbtn" @tap="subInfo">确认提交</button>
      </view>
    </view>
    <!-- 时间组件 -->
    <u-picker
      v-model="showTime"
      mode="time"
      :params="params"
      @confirm="getTime"
    ></u-picker>
    <u-select v-model="showSocial" :list="list" @confirm="getSocial"></u-select>
  </view>
</template>

<script>
export default {
  data() {
    return {
      sqname: "请选择医保类型",
      sqid: "",
      user: {
        userName: "",
        gender: 0, // 性别 1男 0女
        idCard: "",
        height: "",
        weight: "",
        phone: "",
        dep: "",
        gravid: "",
        areaName: "",
        medicalInsuranceType: "", // 医保类型
        lastMenstruation: "", // 末次月经时间
      },

      aName: "",
      dName: "",

      // 时间组件
      params: {
        year: true,
        month: true,
        day: true,
        hour: false,
        minute: false,
        second: false,
      },
      showTime: false,
      //医保类型组件
      showSocial: false,
      insList: [],
      list: [],
      show: false,
      selectorObjIndex: 0,
      socialName: "",
      sqCode: "",
    };
  },
  onLoad(options) {
    console.log(this.config.globalData.user);
    this.user = options.user
      ? JSON.parse(options.user)
      : this.config.globalData.user;
    ////console.log(uni.getStorageSync('community'))
    console.log(this.user);
    var index = this.user.areaName;
    var arr = index.split("-");
    //let sq = this.$store.state.newsqname
    this.aName = arr[0] + "-" + arr[1] + "-" + arr[2];
    this.dName = arr[3];
    if (this.user.lastMenstruation) {
      this.user.lastMenstruation = this.user.lastMenstruation.split(" ")[0];
    }
    // this.user.medicalInsuranceType == '1' ? this.socialName = '城市医保' : this.user.medicalInsuranceType == '2' ? this.socialName =
    // 	'农村医保' : this.socialName = ''
    // //console.log(this.user, '拿到了')
    this.getInsType();
  },
  computed: {
    yblist() {
      let list = [];
      this.insList.forEach((item) => {
        let name = item.dictLabel;
        let id = item.dictValues;
        list.push({
          name: name,
          id: id,
        });
      });
      return list;
    },
    depName() {},
  },
  onReady() {
    // this.getUiStyle();
  },
  methods: {
    getUiStyle() {
      var style = plus.navigator.getUiStyle();
      if ("dark" == style) {
        console.log("当前为暗黑模式");
        uni.setTabBarStyle({
          backgroundColor: "#1B1C1E",
        });
        uni.setNavigationBarColor({
          frontColor: "#ffffff",
          backgroundColor: "#1B1C1E",
          animation: {
            duration: 400,
            timingFunc: "easeIn",
          },
        });
      } else {
        console.log("当前为普通模式");
      }
    },
    onBackPress(e) {
      uni.switchTab({
        url: "/pages/home/home",
      });
      return true;
    },
    shequ() {
      uni.showLoading({
        title: "加载中",
        mask: true,
      });
      setTimeout((s) => {
        uni.hideLoading();
      }, 5000);
      this.config.get("/common/getUserInfo/getDeptInfo", {}).then((res) => {
        uni.hideLoading();
        if (res.data.code === 200) {
          this.user.depName = res.data.data.deptName;
        } else {
          if (res.data.code == "-201") {
            self.config.handleError(res.data);
          } else {
            uni.showToast({
              title: self.config.handleError(res.data),
              icon: "none",
            });
          }
        }
      });
    },
    checkNum(e, type) {
      let val = e.target.value.replace(/(^\s*)|(\s*$)/g, "");
      if (!val) {
        if (type == 1) {
          this.user.height = "";
        } else if (type == 2) {
          this.user.weight = "";
        }
        return;
      }
      var reg = /[^\d.]/g;
      // 只能是数字和小数点，不能是其他输入
      val = val.replace(reg, "");
      // // 保证第一位只能是数字，不能是点
      val = val.replace(/^\./g, "");
      // // 小数只能出现1位
      val = val.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
      // // 小数点后面保留2位
      val = val.replace(/^(\-)*(\d+)\.(\d\d).*$/, "$1$2.$3");
      this.$nextTick(() => {
        if (type == 1) {
          this.user.height = val;
        } else if (type == 2) {
          this.user.weight = val;
        }
      });
    },
    getSelectVal(v) {
      //console.log(this.insList)
      this.selectorObjIndex = v[0];
      this.sqname = this.insList[v].dictLabel;
      this.sqid = this.insList[v].dictValues;
      // this.user.medicalInsuranceType = this.insList[v].dictValues
      //console.log(this.insList[v].dictValues)
    },
    getLoginInfo() {
      uni.showLoading({
        title: "加载中",
        mask: true,
      });
      setTimeout((s) => {
        uni.hideLoading();
      }, 5000);
      this.config.get("/appIndexMenu/getUserInfo", {}).then((res) => {
        uni.hideLoading();
        if (res.data.code === 200) {
          // res.data.data.birthday
          this.config.globalData.user = res.data.data;
          this.config.globalData.user.age = pub.analyzeIDCard(
            res.data.data.idCard
          ).age;
          uni.$emit("user", true);
        } else {
          if (res.data.code == "-201") {
            self.config.handleError(res.data);
          } else {
            uni.showToast({
              title: self.config.handleError(res.data),
              icon: "none",
            });
          }
        }
      });
    },
    getInsType() {
      let self = this;
      // this.config.loading()
      this.config
        .get("/util/sysDictData/type/medical_insurance_type", {})
        .then((res) => {
          uni.hideLoading();
          //console.log(res)
          if (res.data.code === 200) {
            self.insList = res.data.data;
            //console.log(self.insList)
            self.sqCode = self.user.medicalInsuranceType;
            for (var i = 0; i < self.insList.length; i++) {
              if (self.insList[i].dictValues == self.sqCode) {
                self.sqname = self.insList[i].dictLabel;
              }
            }
          } else {
            if (res.data.code == "-201") {
              self.config.handleError(res.data);
            } else {
              uni.showToast({
                title: self.config.handleError(res.data),
                icon: "none",
              });
            }
          }
        });
    },
    getTime(time) {
      let tstr = time.year + "-" + time.month + "-" + time.day;
      this.user.lastMenstruation = tstr;
      let nowTime =
        new Date().getFullYear() +
        "-" +
        (new Date().getMonth() + 1) +
        "-" +
        new Date().getDate();
      this.dateDiffWeek(tstr, nowTime);
    },
    dateDiffWeek(start, end) {
      var arrDate, objDate1, objDate2, intDays;
      arrDate = start.split("-");
      objDate1 = new Date(arrDate[1] + "-" + arrDate[2] + "-" + arrDate[0]);
      arrDate = end.split("-");
      objDate2 = new Date(arrDate[1] + "-" + arrDate[2] + "-" + arrDate[0]);
      intDays = parseInt(Math.abs(objDate1 - objDate2) / 1000 / 60 / 60 / 24);
      intDays = intDays + 1;
      var WeekNum = parseInt(intDays / 7);
      if (WeekNum < 0 || WeekNum >= 50) {
        // WeekNum = 1;
        uni.showToast({
          title: "孕周有效值为0-50周",
          icon: "none",
        });
        this.user.lastMenstruation = "请重新选择";
      }
    },
    // 去选择社区
    goSelectDep() {
      uni.navigateTo({
        url:
          "/pages/reg/select-dep?user=" +
          JSON.stringify(this.user) +
          "&url=/pages/reg/edit-info",
      });
    },
    valid() {
      if (!this.user.userName) {
        uni.showToast({
          title: "请输入姓名",
          icon: "none",
        });
        return false;
      }
      // if (!this.config.pub._isIdCard(this.user.idCard)) {
      //   uni.showToast({
      //     title: "请输入正确的身份证号",
      //     icon: "none",
      //   });
      //   return false;
      // }

      if (!this.config.pub.isMobile(this.user.phone)) {
        uni.showToast({
          title: "请输入正确的手机号",
          icon: "none",
        });
        return false;
      }
      const reg = /(^[1-9](\d+)?(\.\d{1,2})?$)|(^0$)|(^\d\.\d{1,2}$)/;
      if (!reg.test(this.user.height)) {
        uni.showToast({
          title: "请输入正确的身高，如有小数请保留至后两位小数",
          icon: "none",
        });
        return;
      }
      if (this.user.height < 10 || this.user.height > 200) {
        uni.showToast({
          title: "身高的范围在10-200之间",
          icon: "none",
        });
        return;
      }
      if (!reg.test(this.user.weight)) {
        uni.showToast({
          title: "请输入正确的体重，如有小数请保留至后两位小数",
          icon: "none",
        });
        return;
      }
      if (this.user.weight < 0 || this.user.weight > 200) {
        uni.showToast({
          title: "体重的范围在0-200之间",
          icon: "none",
        });
        return;
      }
      return true;
    },
    subInfo() {
      if (!this.valid()) return;
      let obj = this.user;
      this.user.medicalInsuranceType = this.sqid;
      let self = this;
      uni.showLoading({
        title: "加载中",
        mask: true,
      });
      //console.log(obj)
      setTimeout((s) => {
        uni.hideLoading();
      }, 5000);
      this.config.post("/initUser/updateInfo", obj).then((res) => {
        uni.hideLoading();
        if (res.data.code === 200) {
          this.getLoginInfo();
          uni.switchTab({
            url: "../user/user",
          });
        } else {
          if (res.data.code == "-201") {
            self.config.handleError(res.data);
          } else {
            uni.showToast({
              title: self.config.handleError(res.data),
              icon: "none",
            });
          }
        }
      });
    },
    getSocial(social) {
      this.user.medicalInsuranceType = social[0].value;
      this.socialName = social[0].label;
    },
  },
  mounted() {},
};
</script>

<style lang="less" scoped>
.inp-group {
  width: 85%;
  margin: 0 auto;

  .inp-item {
    margin-top: 10upx;

    .inp-title {
      padding: 15upx 0;
      margin-top: 30upx;
      font-size: 30upx;
      font-weight: 900;
      color: #777;
    }

    .inp {
      padding: 15upx 0;
      color: #333;
      margin-top: 30upx;
    }
  }

  .sbtn {
    background: #18c7e1;
    color: #fff;
  }
}

.gravid {
  color: #999;
  font-size: 34upx;
}

.gravid.active {
  color: #18c7e1;
}
</style>
<style scoped>
@media (prefers-color-scheme: closedark) {
  .bd {
    height: 100%;
    margin-top: -5px;
    background-color: #1b1c1e !important;
  }

  .inp-title {
    color: #ccc !important;
  }

  .inp {
    color: #ebeeed !important;
  }

  .t1 {
    color: #ebeeed !important;
  }
}
</style>
